<template>
	<scroll-view scroll-y="true" class="scro" type="list">
		<view class="images" v-for="item in goodsList">
			<image :show-menu-by-longpress="true" :src="item.cover_url" @click="goodDetail(item)"
				@longpress="saveImage(item)" />
			<view class="text">
				
				<text>{{item.name}} ￥{{item.price}}</text>
				<view>
					
					<view class="icons-likes">
						<view v-for="(item, index) in likesData" :class="item.animate">
							<u-icon
							size="35"
							:name="item.name" 
							:color="item.color" 
							:key="item.id"></u-icon>
						</view>
						<view>
							<u-icon color="#fc5531" size="31" name="heart-fill"
								@click="createLikes"></u-icon>
						</view>
					</view>
					<image src="../../static/tab-bar/加号.png" @click="addBtn(item)"></image>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import goodApi from "../../apis/goodApi.js"
	import store from "@/store/pop.js"
	import style from "@/store/style.js"
	export default {
		name: "my-goods",
		props: {
			index: Number
		},
		data() {
			return {
				goodsList: [],
				goodMap: {
					language: "cn",
					platform: "pc",
					token: "0",
					ver: "0.5.0",
					shop_id: 4
				},
				likesData: [],
				
			};
		},
		methods: {
			async getGoodInfo() {
				if (style.state.flag) {
					this.goodMap.language = 'cn'
				} else {
					this.goodMap.language = 'en'
				}
				this.goodMap.shop_id = style.state.cityId;
				const {
					data: res
				} = await goodApi.getAllGoods(this.goodMap)
				let len = res.data.goods_type_list.length;
				let goods = res.data.goods_data;
				for (let i in goods) {
					if (this.index === goods[i].goods_type_id) {
						this.goodsList = goods[i].goods_list
						return;
					}
				}
				let goodsList = [];
				for (let i in goods) {
					goodsList = goodsList.concat(goods[i].goods_list)
				}
				this.goodsList = goodsList

			},
			addBtn(item) {
				store.commit('change', true)
				store.commit('getGoodsId', item.goods_id)
			},
			//获取商品信息
			goodDetail(item) {
				store.commit('getGoodsId', item.goods_id)
				uni.navigateTo({
					url: "/pages/goodDetail/goodDetail"
				})
			},
			//长按保存图片
			saveImage(item) {
				//提示是否要保存图片
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要保存图片到本地相册吗？',
					success: function(res) {
						if (res.confirm) {
							that.save(item)
						} else if (res.cancel) {

						}
					}
				})
			},
			//保存图片
			save(item) {
				//调用uni.saveImageToPhotoAlbum保存图片
				uni.getImageInfo({
					src: item.cover_url,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.path,
							success: () => {
								uni.showToast({
									title: '保存成功',
									icon: 'success'
								});
							},
							fail() {
								uni.showToast({
									title: '保存失败',
									icon: 'error'
								})
							}
						});
					}
				})
			},
			//点赞
			createLikes() {
				const params = this.getLikeParams();
				console.log(this.likesData)
				this.likesData.push(params);
				if(this.likesData.length == 10){
					this.likesData.splice(0, 1)
				}
			},
			//随机生成类名和颜色
			randomNum(min, max) {
				return Math.floor(Math.random() * (max - min)) + min;
			},
			getLikeParams(){
				const classList = ['icon-animate-1'];
				const colorList = ['#fc5531', '#fcd030', '#00ff7f'];
				const className = classList[this.randomNum(0, classList.length)];
				const colorName = colorList[this.randomNum(0, colorList.length)];
				return{
					animate: className,
					color: colorName,
					name: 'heart-fill',
					id: `${new Date().getTime()}-likes`
				};
			}
		},
		created() {
			this.getGoodInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.scro {
		height: 100%;
	}

	.images {
		width: 100%;
		position: relative;
		image {
			width: 100%;
			height: 570px;
		}
		.text {
			position: absolute;
			z-index: 1;
			bottom: 20px;
			width: 100%;
			color: white;
			font-weight: lighter;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				margin-left: 10px;
				text-shadow: 1px 1px 2px pink;
			}

			image {
				background-color: white;
				border-radius: 50%;
				width: 30px;
				height: 30px;
				margin-right: 10px;
				box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
				opacity: 0.5;
			}
			.icons-likes{
				position: absolute;
				z-index: 99;
				bottom: 40px;
			}
			.icon-animate-1 {
			  animation: animate-2 2s ease-in-out;
			  animation-fill-mode: forwards;
			}
			@keyframes animate-2 {
			  0% {
			    transform: translateY(30px);
			    opacity: 1;
			  }
			  100% {
			    transform: translateY(-180px);
			    opacity: 0;
			  }
			}
			
		}
	}
	
</style>